/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230907
* @version:0.0.1
* @type:interface
* @description:
* # SResult
* SResult helps you easily build a quick prompt , you can build it in popup window
* ## properties
* - in-out property <string> btn-text : result button text
* - in property <length> icon-size : result icon size
* - in property <[SButtonProps]> btns : result buttons
* - in property <ResultType> result-type: result type
* - in-out property <string> text : text of the result
* - in-out property <image> icon : result icon
* ## functions
* ## callbacks
* - callback clicked(SButtonProps) : run if you click the button
* ============================================
*/

import {SCard} from "../card/index.slint";
import {SIcon} from "../icon/index.slint";
import {SButton} from "../button/index.slint";
import {SText} from "../text/index.slint";
import {ROOT_STYLES,DefaultSResultProps} from "../../themes/index.slint";
import { Themes,ResultType,UseSurrealismFn,UseIcons,SButtonProps } from "../../use/index.slint";


export component Result inherits SCard { 
  in-out property <string> btn-text : DefaultSResultProps.btn-text;
  in property <length> icon-size : DefaultSResultProps.icon-size;
  in property <[SButtonProps]> btns : DefaultSResultProps.btns; 
  in property <ResultType> result-type: DefaultSResultProps.result-type;
  in-out property <string> text : DefaultSResultProps.text;
  in-out property <image> icon : DefaultSResultProps.icon;
  card-height: DefaultSResultProps.card-height;
  card-width: DefaultSResultProps.card-width;
  padding-type: DefaultSResultProps.padding-type;
  shadow-type: DefaultSResultProps.shadow-type;
  border-type : DefaultSResultProps.border-type;
  theme: DefaultSResultProps.theme;
  font-color: DefaultSResultProps.color;
  font-family: DefaultSResultProps.font-family;
  font-size: DefaultSResultProps.font-size;
  font-italic: DefaultSResultProps.font-italic;
  font-weight: DefaultSResultProps.font-weight;
  callback clicked(SButtonProps);
  states [
    primary when result-type==ResultType.Primary: {
      root.theme : Themes.Primary;
      root.icon : UseIcons.icons.Smiling-face;
      root.text : "This is a primary message!";
      root.btn-text : "PRIMARY";
      root.font-color : ROOT-STYLES.sur-theme-colors.primary.font;
    }
    success when result-type==ResultType.Success: {
      root.theme : Themes.Success;
      root.text : "This is a success message!";
      root.icon : UseIcons.icons.Success;
      root.btn-text : "SUCCESS";
      root.font-color : ROOT-STYLES.sur-theme-colors.success.font;
    }
    info when result-type==ResultType.Info: {
      root.theme : Themes.Info;
      root.icon : UseIcons.icons.Info;
      root.text : "This is a info message!";
      root.btn-text : "INFO";
      root.font-color : ROOT-STYLES.sur-theme-colors.info.font;
    }
    warning when result-type==ResultType.Warning: {
      root.theme : Themes.Warning;
      root.icon : UseIcons.icons.Attention;
      root.text : "This is a warning message!";
      root.btn-text : "WARNING";
      root.font-color : ROOT-STYLES.sur-theme-colors.warning.font;
    }
    error when result-type==ResultType.Error: {
      root.theme : Themes.Error;
      root.icon : UseIcons.icons.Close-one;
      root.text : "This is a error message!";
      root.btn-text : "ERROR";
      root.font-color : ROOT-STYLES.sur-theme-colors.error.font;
    }
    help when result-type==ResultType.Help: {
      root.theme : Themes.Light;
      root.icon : UseIcons.icons.Help;
      root.text : "This is a help message!";
      root.btn-text : "HELP";
      root.font-color : ROOT-STYLES.sur-theme-colors.light.font;
    }
  ]
  layout:=VerticalLayout {
    height: root.card-height;
    width: root.card-width;
    alignment: space-around;
    Rectangle {
      height: icon.height;
      width: parent.width;
      icon:=SIcon { 
        colorize: self.get-colorize();
        height: root.icon-size;
        width: root.icon-size;
        theme: root.theme;
        source: root.icon;
      }
    }
    SText { 
      theme: root.theme;
      text: root.text;
      font-size: root.font-size;
      color: root.font-color;
      font-weight: root.font-weight;
      font-italic: root.font-italic;
      font-family: root.font-family;
      wrap: word-wrap;
      vertical-alignment: center;
      horizontal-alignment: center;
    }
    if root.btns.length!=0: btn-view:=HorizontalLayout{
      padding-top: 8px;
      padding-bottom: 8px;
      alignment: center;
      spacing: 8px;
      for btn[index] in root.btns: SButton {
        font-family: btn.font-family;
        font-italic: btn.font-italic;
        font-size: btn.font-size;
        font-weight: btn.font-weight;
        theme: btn.theme;
        padding-type: btn.padding-type;
        shadow-type: btn.shadow-type;
        border-type: btn.border-type;
        icon : btn.icon;
        show-icon: btn.show-icon;
        text: btn.text;
        letter-spacing: btn.letter-spacing;
        clip: btn.clip;
        round: btn.round;
        clicked => {
          root.clicked(btn);
        }
      }
    }
    if root.btns.length==0:HorizontalLayout{
      padding-top: 8px;
      padding-bottom: 8px;
      alignment: center;
      inner-btn:=SButton{
        theme: root.theme;
        text: root.btn-text;
        clicked => {
          root.clicked(root.btns[0]);
        }
      }
    }
  }
}